<template>
  <view>
    <yy-paging
      v-model="dataList"
      @onRefresh="onRefresh"
      @query="queryList"
      @scroll="scroll"
      ref="paging"
      :auto="false"
      class="!bg-black"
      :showRefresherWhenReload="false"
      :refresher-enabled="false"
      :useVirtualList="false"
    >
      <template #top>
        <u-navbar
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#000' : '#000' }"
          :border-bottom="false"
          height="44"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="grid grid-cols-3 items-center px-3 w-full">
            <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
              <image src="/static/dddr129.png" mode="aspectFill" class="size-6" />
            </view>
            <view class="line-clamp-1 flex col-span-1 justify-center">
              <view class="text-[#fff] font-bold text-base"> 视频指路</view>
            </view>
            <view class="flex col-span-1 justify-end">
              <view class="text-[14px] text-[#5C6068]"> </view>
            </view>
          </view>
        </u-navbar>
      </template>
      <template #empty>
        <yy-empty></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore text=""></yy-nomore>
      </template>
      <!-- -->
      <!--  -->
      <view class="flex flex-col flex-1 justify-center items-center bg-red-500" :style="{ height: containerHeight }">
        <!--  -->
        <video
          :src="videoUrl"
          controls
          autoplay
          class="size-full"
          object-fit="contain"
          :show-fullscreen-btn="false"
          :enable-play-gesture="true"
        ></video>
      </view>
    </yy-paging>
    <!-- 组件  -->
    <!-- 组件 -->
    <!-- 组件 -->
    <!-- 组件 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        options: {}, // 选项
        videoUrl: '',
        containerHeight: ''
      }
    },
    mounted() {
      this.calcContainerHeight()
    },
    onLoad(options) {
      this.options = options
      this.videoUrl = decodeURIComponent(options.video)
    },
    onShow() {},
    methods: {
      // 下拉刷新回调
      onRefresh() {},
      // 返回上一页
      returnToPage() {
        vk.navigateBack()
      },
      // 监听页面滚动
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      // 分页查询列表数据
      async queryList(page, limit) {
        this.$refs.paging.complete([''])
      },
      // 计算容器高度
      calcContainerHeight() {
        const systemInfo = uni.getSystemInfoSync()
        console.log('systemInfo==> ', systemInfo)
        this.containerHeight = `${systemInfo.safeArea.height - 44}px`
      }
    }
  }
</script>

<style lang="scss" scoped>
  // .videos {
  //   width: 100vw !important;
  //   height: auto;
  // }
</style>
